<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition 和 animation 的区别</title>
<style type="text/css">  
</style>
</head>
<body>
<pre>
transition关注的是CSS property的变化，property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。
详细资料可以参考： <a href="https://www.zhihu.com/question/19749045" rel="nofollow">《CSSanimation 与 CSStransition 有何区别？》</a> <a href="https://blog.csdn.net/cddcj/article/details/53582334" rel="nofollow">《CSS3Transition 和 Animation 区别及比较》</a> <a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" rel="nofollow">《CSS 动画简介》</a> <a href="https://juejin.im/post/5b137e6e51882513ac201dfb" rel="nofollow">《CSS 动画：animation、transition、transform、translate》</a>
</pre>
<script type="text/javascript">
</script>
</body>
</html>